import React from 'react';

import { COLOR } from 'src/utils/color';
import { Table } from 'antd';

function ModelCompare(props) {
  function getColumns() {
    return [
      {
        title: '模型入参字段',
        key: 'param_name',
        dataIndex: 'param_name',
        render: (text, record) => {
          const style = {};
          if (record.data_status === 1) {
            style.color = COLOR._BLUE;
          } else if (record.data_status === 3) {
            style.color = COLOR._RED;
          }
          return <span style={style}>{text}</span>;
        },
      },
      {
        title: '类型',
        key: 'param_data_type',
        dataIndex: 'param_data_type',
        render: (text, record) => {
          const style = {};
          if (record.data_status === 1) {
            style.color = COLOR._BLUE;
          } else if (record.data_status === 3) {
            style.color = COLOR._RED;
          }
          return <span style={style}>{text}</span>;
        },
      },
      {
        title: '风控事件字段/指标',
        key: 'feature_name',
        dataIndex: 'feature_name',
        render: (text, record) => {
          const style = {};
          if (record.data_status === 1) {
            style.color = COLOR._BLUE;
          } else if (record.data_status === 3) {
            style.color = COLOR._RED;
          }
          return <span style={style}>{record.feature_name === '' ? record.field_name : record.feature_name}</span>;
        },
      },
      {
        title: '所属渠道',
        key: 'app_name',
        dataIndex: 'app_name',
        render: (text, record) => {
          const style = {};
          if (record.data_status === 1) {
            style.color = COLOR._BLUE;
          } else if (record.data_status === 3) {
            style.color = COLOR._RED;
          }
          return <span style={style}>{text}</span>;
        },
      },
      {
        title: '关联事件',
        key: 'event_name',
        dataIndex: 'event_name',
        render: (text, record) => {
          const style = {};
          if (record.data_status === 1) {
            style.color = COLOR._BLUE;
          } else if (record.data_status === 3) {
            style.color = COLOR._RED;
          }
          return <span style={style}>{text}</span>;
        },
      },
    ];
  }

  const { name, mapping_relation } = props.value;

  return (
    <div className='tantuer-form' style={{ paddingBottom: '20px' }}>
      模型名称:{name}
      <div className='h3-title'>字段映射表</div>
      <Table
        columns={getColumns()}
        dataSource={mapping_relation}
        pagination={false}
        rowKey={(record) => {
          return (
            record.param_id +
            '.' +
            record.model_list_id +
            '.' +
            record.model_list_config_id +
            '.' +
            record.app_id +
            '.' +
            record.event_id +
            '.' +
            record.field_id
          );
        }}
      />
    </div>
  );
}

export default ModelCompare;
